<template>
	<div id="app" style="transform: scale(0.85);position: absolute;margin-top: -200px;margin-left: -500px;">

		<el-row style="padding: 20px;">
			<el-col :span="10">
				<el-input v-model="input" placeholder="请输入要搜索的商品"></el-input>
			</el-col>
			<el-col :span="3">
				<el-button type="info" icon="el-icon-search" @click='searchBook'>搜索</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="info" @click='onaddBookVisible'>添加商品</el-button>
			</el-col>

		</el-row>

		<el-table stripe border :data="tableData" style="width: 100%">
			<el-table-column label="商品图片" width="180">
				<template slot-scope="scope">
					<el-image style="width: 150px; height: 150px;border: 1px solid #00F7DE;border-radius: 20px;" :src="scope.row.medicinePicture"
					:preview-src-list="[scope.row.medicinePicture]">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</template>

			</el-table-column>
			<el-table-column prop="medicineName" label="商品名称" width="180">
			</el-table-column>
			<el-table-column prop="medicineSort" label="商品种类" width="100">
			</el-table-column>
			<el-table-column prop="medicineUnivalence" label="商品单价" width="80">
			</el-table-column>
			<el-table-column prop="medicineNumber" label="库存" width="80">
			</el-table-column>
			<el-table-column prop="medicineEfficience" label="功效">
			</el-table-column>
			<el-table-column prop="medicineSalesVolume" label="销售额" width="80">
			</el-table-column>
			<el-table-column prop="medicineEvaluate" label="评价数" width="80">
			</el-table-column>


			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="info" icon="el-icon-edit" @click="updateBook(scope.row)" style="transform: scale(0.8);">编辑</el-button>
					
					<el-button type="info" @click="deleteBook(scope.row)" style="transform: scale(0.8);position: absolute;margin-left: -10px;">删除</el-button>
				</template>

			</el-table-column>
		</el-table>


		<el-dialog title="添加商品" :visible.sync="addBookVisible" width="80%" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="商品图片:">
					<el-input v-model="form.medicinePicture"></el-input>
				</el-form-item>
				<el-form-item label="商品名称:">
					<el-input v-model="form.medicineName"></el-input>
				</el-form-item>
				<el-form-item label="商品单价:">
					<el-input v-model="form.medicineUnivalence"></el-input>
				</el-form-item>
				<el-form-item label="商品库存:">
					<el-input v-model="form.medicineNumber"></el-input>
				</el-form-item>
				<el-form-item label="商品功效:">
					<el-input v-model="form.medicineEfficience"></el-input>
				</el-form-item>
				<el-form-item label="商品评价:">
					<el-input v-model="form.medicineEvaluate" placeholder="0" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="商品销售额:">
					<el-input v-model="form.medicineSalesVolume" placeholder="0" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="商品分类:">
					<el-input v-model="form.medicineSort"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onaddBook">添加</el-button>
					<el-button @click="onaddBookcancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="修改商品信息" :visible.sync="updateMedicineVisible" width="80%" :before-close="handleClose">
			<el-form :model="updateMedicineForm" label-width="80px">
				<el-form-item label="商品名称:">
					<el-input v-model="updateMedicineForm.medicineName"></el-input>
				</el-form-item>
				<el-form-item label="商品单价:">
					<el-input v-model="updateMedicineForm.medicineUnivalence"></el-input>
				</el-form-item>
				<el-form-item label="商品库存:">
					<el-input v-model="updateMedicineForm.medicineNumber"></el-input>
				</el-form-item>
				<el-form-item label="商品功效:">
					<el-input v-model="updateMedicineForm.medicineEfficience"></el-input>
				</el-form-item>
				<el-form-item label="商品种类">
					<el-input v-model="updateMedicineForm.medicineSort"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onUpdateCommit">修改</el-button>
					<el-button @click="onupdatecancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'app',
		mounted() {
			this.requestBook()
		},
		methods: {
			requestBook() {
				var that = this
				this.$axios.get("http://localhost:8088/xiaoxiang/findAllMedicine")
					.then(function(response) {
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)
					})
			},
			searchBook() {
				var that = this
				console.log(this.input)
				this.$axios.post('http://localhost:8088/xiaoxiang/findAllMedicineName', {
						medicineName: this.input
					})
					.then(function(response) {
						console.log(response.data.data)
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)
					})
			},
			onaddBook() {
				var that = this
				console.log(this.form.medicineName)
				this.$axios.post('http://localhost:8088/xiaoxiang/addMedicine', {
						medicinePicture: this.form.medicinePicture,
						medicineName: this.form.medicineName,
						medicineUnivalence: this.form.medicineUnivalence,
						medicineNumber: this.form.medicineNumber,
						medicineEfficience: this.form.medicineEfficience,
						medicineEvaluate: this.form.medicineEvaluate,
						medicineSalesVolume: this.form.medicineSalesVolume,
						medicineSort: this.form.medicineSort
					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.addBookVisible = false
							that.requestBook()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})

			},
			onaddBookVisible() {
				this.addBookVisible = true
			},
			onaddBookcancel() {
				this.addBookVisible = false
			},
			updateBook(medicine) {
				console.log(medicine)
				this.updateMedicineForm = medicine
				this.updateMedicineVisible = true
			},
			onUpdateCommit() {
				var that = this
				this.$axios.post('http://localhost:8088/xiaoxiang/updateMedicine', {
						medicineId: this.updateMedicineForm.medicineId,
						medicinePicture: this.updateMedicineForm.medicinePicture,
						medicineName: this.updateMedicineForm.medicineName,
						medicineUnivalence: this.updateMedicineForm.medicineUnivalence,
						medicineNumber: this.updateMedicineForm.medicineNumber,
						medicineEfficience: this.updateMedicineForm.medicineEfficience,
						medicineEvaluate: this.updateMedicineForm.medicineEvaluate,
						medicineSalesVolume: this.updateMedicineForm.medicineSalesVolume,
						medicineSort: this.updateMedicineForm.medicineSort

					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.updateBookVisible = false
							that.requestBook()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})
			},
			onupdateMedicineVisible() {
				this.updateMedicineVisible = true
			},
			onupdatecancel() {
				this.updateMedicineVisible = false
			},
			deleteBook(medicine) {
				var that = this
				this.deleteList = medicine
				console.log(this.deleteList.medicineId)
				this.$axios.post("http://localhost:8088/xiaoxiang/deleteMedicineByName", {
						medicineName: this.deleteList.medicineName
					})
					.then(function(response) {
						console.log(response.data.msg)
						if (response.data.code == 0) {
							that.$message(response.data.msg);
							that.requestBook()()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						console.log(error)
					})
			},
		},
		data() {
			return {
				tableData: [{
					medicineId: '',
					medicinePicture: '',
					medicineName: "",
					medicineUnivalence: "",
					medicineNumber: "",
					medicineEfficience: "",
					medicineEvaluate: "",
					medicineSalesVolume: "",
					medicineSort: ""

				}],
				deleteList: [{
					medicineId: '',
					medicinePicture: '',
					medicineName: "",
					medicineUnivalence: "",
					medicineNumber: "",
					medicineEfficience: "",
					medicineEvaluate: "",
					medicineSalesVolume: "",
					medicineSort: ""
				}],
				input: '',
				addBookVisible: false,
				updateBookVisible: false,
				form: {
					medicinePicture: '',
					medicineName: "",
					medicineUnivalence: "",
					medicineNumber: "",
					medicineEfficience: "",
					medicineEvaluate: "",
					medicineSalesVolume: "",
					medicineSort: ""
				},
				updateMedicineForm: {
					medicineId: "",
					medicinePicture: '',
					medicineName: "",
					medicineUnivalence: "",
					medicineNumber: "",
					medicineEfficience: "",
					medicineEvaluate: "",
					medicineSalesVolume: "",
					medicineSort: ""
				}
			}
		}
	}
</script>
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
